<template>
  <div class="page-card dhData">
    <!-- <h-query :showKey="[]" :query="query" @search="search">
      <div class="a-button-right">
        <a-space>
          <UploadExcel download="/web/Enforcement/write_Enforcement" @change="$refs.htable.refresh(true)" />
          <a-button type="primary" @click="actions">抽 签</a-button>
          <a-button type="primary" @click="showHistoryAct">抽签历史记录</a-button>
          <a-button type="primary" @click="add">添 加</a-button>
        </a-space>
      </div>
    </h-query> -->
    <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="true"
      :zebraStripes="true">
      <span slot="type" slot-scope="{text}">
        <a-tag color="red" v-if="text == 1">{{ type[text] || '未完结' }}</a-tag>
        <a-tag color="blue" v-else>{{ type[text] || '未完结' }}</a-tag>
      </span>
      <span slot="action" slot-scope="{text, record}">
        <a @click="showDetail(record)">查看详情</a>
        <a-divider type="vertical"></a-divider>

        <a v-if="record.type == 2" @click="writeRamOut(record)">导出结果</a>
        <a v-else @click="toLottie(record)" class="red">追加人选</a>
      </span>
      <!-- <span slot="isHome" slot-scope="{text, record}">
        <a-switch v-model="record.isHome" @change="showHome(record)"></a-switch>
      </span>
      <span slot="isIndex" slot-scope="{text, record}">
        <a-switch v-model="record.isIndex" @change="showTop(record)"></a-switch>
      </span> -->
    </h-table>

    <createInfo ref="modal" v-model="show" @submit="submit" />

    <a-modal title="抽签历史记录" width="800px" v-model="showHistory" @ok="showHistory=false">
      <h-table
        ref="htable2"
        @init="getListHistory"
        :config="config2">
        <span slot="action" slot-scope="{text, record}">
          <a @click="showDetail(record)">查看详情</a>
        </span>
      </h-table>
    </a-modal>
    <a-modal title="抽签历史记录" width="800px" v-model="showHistoryDetail">
      <p>抽签时间：{{ detailForm.createTime }} <span style="margin: 0 10px"></span> 抽签人数：{{ detailForm.sum }}</p>
      <p>抽签结果描述：{{ detailForm.describe }}</p>
      <h-table
        ref="htable3"
        @init="getListHistoryDetail"
        :config="config3">
      </h-table>
      <template slot="footer">
        <a-button key="back" @click="showHistoryDetail = false">
          确定
        </a-button>
      </template>
    </a-modal>

    <readInfo :id="id" v-model="showRead" />

  </div>
</template>
<script>
// eslint-disable-next-line
import { getEnforcement, getEnforcementDetail, addEnforcement, deleteEnforcement, editEnforcement, getEnforcementHistoryById, getEnforcementHistory, getEnforcementRandom, writeRamOut } from '@/api/db';
import createInfo from './action/createInfo';
import UploadExcel from '@/components/UploadExcel/Index';
import readInfo from './action/readInfo';
import moment from 'moment';

export default {
  components: {
    createInfo,
    UploadExcel,
    readInfo
  },
  data() {
    return {
      id: '',
      showCq: false,
      showHistory: false,
      showHistoryDetail: false,
      formCq: {},
      detailForm: {},
      showRead: false,
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '保存状态',
            dataIndex: 'type',
            scopedSlots: { customRender: 'type' }
          },
          {
            align: 'center',
            title: '抽签描述',
            dataIndex: 'describe'
          },
          {
            align: 'center',
            title: '抽签时间',
            dataIndex: 'createTime'
          },
          {
            align: 'center',
            title: '抽签人数',
            dataIndex: 'sum'
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 100,
          // showSizeChanger: true,
          // showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }
      },
      config2: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        scroll: {
          y: 400
        },
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'indexs'
          },
          {
            align: 'center',
            title: '抽签时间',
            dataIndex: 'createTime'
          },
          {
            align: 'center',
            title: '抽签人数',
            dataIndex: 'sum'
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: false
      },
      config3: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        scroll: {
          y: 400
        },
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'order'
          },
          {
            align: 'center',
            title: '姓名',
            dataIndex: 'name'
          },
          {
            align: 'center',
            title: '单位',
            dataIndex: 'company'
          },
          {
            align: 'center',
            title: '职务',
            dataIndex: 'post'
          },
          {
            align: 'center',
            title: '职称',
            dataIndex: 'title'
          },
          {
            align: 'center',
            title: '资历',
            dataIndex: 'qualifications'
          },
          {
            align: 'center',
            title: '参与项目',
            dataIndex: 'project'
          }
        ],
        pagination: false
      },
      form: {

      },
      rules: {
        sum: [{ required: true, message: '请输入' }],
        examine: [{ required: true, message: '请选择' }],
        type: [{ required: true, message: '请选择' }],
        orientation: [{ required: true, message: '请选择' }]
      },
      type: {
        1: '未完结',
        2: '已完结'
      },
      query: [
        {
          key: 'name',
          type: 'input',
          label: '姓名'
        }
      ],
      selectedRowKeys: [],
      selectedRow: [],
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    showDetail({ lotteryId, sum, createTime }) {
      this.showHistoryDetail = true;
      this.detailForm = { lotteryId, sum, createTime };
      this.$nextTick(() => {
        this.$refs.htable3.refresh();
      });
    },
    getList(params) {
      // const { current, pageSize } = params;
      Object.assign(this.queryParams, params);
      getEnforcementHistory(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.map(e => {
          return {
            ...e
          };
        });
        this.config.pagination.total = res.data.total;
      });
    },
    writeRamOut({ lotteryId, sum, createTime }) {
      this.detailForm = { lotteryId, sum, createTime };
      getEnforcementHistoryById(this.detailForm).then(res => {
        const data = res.data.map((e, i) => {
          return {
            ...e,
            order: i + 1
          };
        });
        writeRamOut({
          writeRamOut: data
        }).then(res => {
          const blob = new Blob([res], { type: 'application/vnd.ms-excel' });

          const filename = `${moment().format('YYYYMMDDHHmmss')}.xls`;

          if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10
              navigator.msSaveBlob(blob, filename);
          } else {
            // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
            const elink = document.createElement('a');
            elink.download = filename;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          }
        });
        // this.config.pagination.total = res.data.total;
      });

      // this.config3.dataSource
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.$refs.htable.refresh();
    },
    add() {
      this.$refs.modal.add();
      this.show = true;
    },
    edit(row) {
      this.$refs.modal.edit(row);
      this.show = true;
    },
    look({ id }) {
      this.id = id;
      this.showRead = true;
    },
    submit() {
      this.$refs.htable.refresh();
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        title: '确定要删除吗？',
        onOk() {
          deleteEnforcement({ id, isDelete: -1 }).then(res => {
            that.$message.success('删除成功');
            that.$refs.htable.refresh(true);
          });
        },
        onCancel() {
          console.log('Cancel');
        }
      });
    },
    submitCq() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          getEnforcementRandom({ ...this.form, examine: 1 }).then(res => {
            this.$message.success('抽签完成！');
            // this.show = false
            this.$refs.htable.refresh();
            this.config3.dataSource = res.data.map((e, i) => {
              return {
                ...e,
                order: i + 1
              };
            });
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    actions() {
      this.showCq = true;
    },
    showHistoryAct() {
      this.showHistory = true;
      this.$nextTick(() => {
        this.$refs.htable2.refresh();
      });
    },
    getListHistory(params) {
      Object.assign(this.queryParams, params);
      getEnforcementHistory(this.queryParams).then(res => {
        this.config2.dataSource = res.data.map((e, i) => {
          return {
            ...e,
            order: i + 1
          };
        });
        // this.config.pagination.total = res.data.total;
      });
    },
    toLottie({ lotteryId, sum, createTime }) {
      this.$router.push(`/db/lottie?id=${lotteryId}&sum=${sum}&createTime=${createTime}`);
    },
    getListHistoryDetail(params) {
      getEnforcementHistoryById(this.detailForm).then(res => {
        this.config3.dataSource = res.data.map((e, i) => {
          return {
            ...e,
            order: i + 1
          };
        });
        // this.config.pagination.total = res.data.total;
      });
    }

  }
};
</script>
<style lang="less">
.dhData {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   isIndex: 0;
  // }

}
.orientation-form {
  .ant-radio-button-wrapper {
    border-radius: 40px;
    // overflow: hidden;
    margin: 6px 6px;
    border-left: 1px solid #d9d9d9;
    &::before {
      display: none;
    }
  }

}
.custom-modal {
  .ant-modal-close {
    width: auto !important;
    text-align: right;
    line-height: 56px;
    right: 12px;
    color: #333;
    &:hover {
      color: #1890ff;
    }
  }
  .ant-modal-close-x {
    text-align: right;
    width: 100% !important;
  }
}
</style>
